<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>智慧学生卡</title>
    <link href="/css/bootstrap.min.css" type="text/css" rel="stylesheet">
    <link href="/css/bootstrapValidator.css" type="text/css" rel="stylesheet">

    <!--[if lt IE 9]>
    <script src="/js/html5shiv.js" type="text/javascript"></script>
    <script src="/js/respond.min.js" type="text/javascript"></script>
    <![endif]-->

    <style>
        *{
            padding: 0;
            margin: 0;
            list-style: none;
            text-decoration: none;
        }
        html,body{
            height: 100%;
            width: 100%;
            font-family: 'Helvetica Neue',Helvetica,'PingFang SC','Hiragino Sans GB','Microsoft YaHei',Arial,sans-serif;
            color: #555;
            font-size: 15px;
            line-height: 1.7;
        }

        canvas{
            display:block;
            vertical-align:bottom;
        }
        #box{
            width: 100%;
            height: 100%;
            background-color: #F7FAFC;

            background-size: cover;
            background-position: 50% 50%;
            background-repeat: no-repeat;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 1;
        }
        .cent-box{
            width: 300px;
            height: 440px;
            vertical-align: middle;
            white-space: normal;
            margin: 0 auto;
            position: absolute;
            z-index: 2;
            left: 50%;
            top: 50%;
            margin-left: -150px;
            margin-top: -220px;
        }
        .register-box{
            height: 490px;
            margin-top: -270px;
        }
        .cent-box-header{
            text-align: center;
        }

        .cent-box-header .main-title{
            width: 160px;
            height: 74px;
            margin: 0 auto;
            background-size: contain;
        }
        .cent-box-header .sub-title{
            margin: 30px 0 20px;
            font-weight: 400;
            font-size: 18px;
            line-height: 1;
        }

        .index-tab{
            text-align: center;
            font-size: 18px;
            margin-bottom: 10px;
        }
        .index-tab .index-slide-nav{
            display: inline-block;
            position: relative;
        }
        .index-tab a{
            float: left;
            width: 4em;
            line-height: 35px;
            opacity: 0.7;
            -webkit-transition: opacity .15s,color .15s;
            transition: opacity .15s,color .15s;
            color: #555;
        }
        .index-tab a:hover{
            color: #0f88eb;
            opacity: 1;
        }
        .index-tab a.active{
            opacity: 1;
            color: #0f88eb;
        }
    </style>
</head>

<body>
<div id="box"></div>
<div class="cent-box">
    <div class="cent-box-header">
        <h1 class="">智慧学生卡</h1>
        <h2 class="">welcome for your coming!</h2>
    </div>

    <div class="cont-main clearfix">
        <div class="index-tab">
            <div class="index-slide-nav">
                <a href="" data-target="#login" data-toggle="modal" class="active">登录</a>
                <a href="" onclick="openRegModal()" data-toggle="modal" class="active">注册</a>
            </div>
        </div>
    </div>
</div>

<!-- 注册窗口 -->
<div id="register" class="modal fade" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <button class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-title">
                <h1 class="text-center">注册</h1>
            </div>
            <div class="modal-body">
                <form class="form-group" id="register-form">
                    <div class="form-group">
                        <label for="register-modal-username">用户名</label>
                        <input class="form-control" type="text" placeholder="请输入用户名" id="register-modal-username" name="username" onkeydown="etotab(this,'register-form')" onchange="checkusername(this.value)" autocomplete="off">
                    </div>
                    <div class="form-group">
                        <label for="register-modal-fullname">姓名</label>
                        <input class="form-control" type="text" placeholder="请输入您的姓名 例:张三" id="register-modal-fullname" name="realname" onkeydown="etotab(this,'register-form')" onblur="check(this.id)">
                    </div>
                    <div class="form-group">
                        <label for="register-modal-phone">手机号</label>
                        <input class="form-control" type="text" placeholder="11位手机号码" id="register-modal-phone" name="phone" onkeydown="etotab(this,'register-form')" onblur="check(this.id)">
                    </div>
                    <div class="form-group">
                        <label for="register-modal-phone">学生卡号</label>
                        <input class="form-control" type="number" placeholder="" id="register-modal-studentcard" name="imei" onkeydown="etotab(this,'register-form')">
                    </div>
                    <div class="form-group">
                        <label for="register-modal-password">
                            密码&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
                            <a class="glyphicon glyphicon-eye-open" id="registerpt" aria-hidden="true" onclick="changeInputType('register-modal-password',this.id)"></a>
                        </label>
                        <input class="form-control" type="password" placeholder="8-16位字母和数字(不能为纯数字或者纯字母)" id="register-modal-password" name="password" onkeydown="etotab(this,'register-form')" onblur="check(this.id)" autocomplete="off">
                    </div>
                    <div class="form-group">
                        <label for="register-modal-password2">
                            再次输入密码&nbsp&nbsp&nbsp&nbsp
                            <a class="glyphicon glyphicon-eye-open" aria-hidden="true" id="registerpt2" onclick="changeInputType('register-modal-password2',this.id)"></a>
                        </label>
                        <input class="form-control" type="password" placeholder="请再次输入相同的密码" id="register-modal-password2" name="password2" onkeydown="etotab(this,'register-form')" onblur="check(this.id)">
                    </div>
                    <div class="form-group">
                        <label for="register-modal-fullname-student">学生姓名</label>
                        <input class="form-control" type="text" placeholder="请输入您子女的姓名 例:张四" id="register-modal-fullname-student" name="stuname" onkeydown="etotab(this,'register-form')" onblur="check(this.id)">
                    </div>
                    <div class="form-group">
                        <label for="register-modal-sex-student">学生性别</label>
                        <input class="form-control" type="text" list="sexlist" placeholder="男/女" id="register-modal-sex-student" name="stusex" onkeydown="etotab(this,'register-form')">
                        <datalist id="sexlist">
                            <option>男</option>
                            <option>女</option>
                        </datalist>
                    </div>
                    <div class="form-group">
                        <label for="register-modal-school-student">学生所在学校</label>
                        <input class="form-control" type="text"  list="schoolList" placeholder="xxx学校" id="register-modal-school-student" name="schid" onkeydown="etotab(this,'register-form')">
                        <datalist id="schoolList">
                        </datalist>
                    </div>
                    <div class="form-group">
                        <label for="register-modal-grade-student">年级、班级</label>
                        <input class="form-control" type="text" placeholder="例:初2021级02班" id="register-modal-grade-student" name="stugrade" onkeydown="etotab(this,'register-form')">
                    </div>
                    <div class="form-group">
                        <label for="register-modal-type-student">类型</label>
                        <input class="form-control" type="text" list="typelist" placeholder="走读/住校" id="register-modal-type-student" name="stutype" onkeydown="etotab(this,'register-form')">
                        <datalist id="typelist">
                            <option>走读</option>
                            <option>住校</option>
                        </datalist>
                    </div>
                    <div class="form-group">
                        <label for="register-modal-date-student">学生生日</label>
                        <input class="form-control" type="date" id="register-modal-date-student" name="birthday" onkeydown="pbhcsj('register')">
                    </div>
                    <div class="text-right">
                        <button class="btn btn-primary" type="button" id="register-modal-register" onclick="submitregister()">注册</button>
                        <button class="btn btn-danger" data-dismiss="modal">取消</button>
                    </div>
                    <a href="" data-toggle="modal" data-dismiss="modal" data-target="#login">已有账号？点我登录</a>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- 登录窗口 -->
<div id="login" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <button class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-title">
                <h1 class="text-center">登录</h1>
            </div>
            <div class="modal-body">
                <form class="form-group" id="login-form">
                    <div class="form-group">
                        <label for="login-modal-username">用户名</label>
                        <input class="form-control" type="text" placeholder="请输入用户名" id="login-modal-username" name="username" onkeydown="etotab(this,'login-form')">
                    </div>
                    <div class="form-group">
                        <label for="login-modal-password">
                            密码&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
                            <a class="glyphicon glyphicon-eye-open" aria-hidden="true" id="loginpt" onclick="changeInputType('login-modal-password',this.id)"></a>
                        </label>
                        <input class="form-control" type="password" placeholder="8-16位字母和数字" id="login-modal-password" name="password" onchange="check(this.id)" onkeydown="pbhcsj('login')">
                    </div>
                    <div class="text-right">
                        <button class="btn btn-primary" type="button" id="login-modal-login" onclick="submitlogin()">登录</button>
                        <button class="btn btn-danger" data-dismiss="modal">取消</button>
                    </div>
                    <a href="" data-toggle="modal" data-dismiss="modal" data-target="#register">还没有账号？点我注册</a>
                </form>
            </div>
        </div>
    </div>
</div>


<script src="/js/jquery-1.11.1.min.js" type="text/javascript"></script>
<script src="/js/bootstrap.min.js" type="text/javascript"></script>
<script src="/js/bootstrapValidator.js" type="text/javascript"></script>
<script src="/js/particles.js" type="text/javascript"></script>
<script src="/js/background.js" type="text/javascript"></script>
<script type="text/javascript" language=JavaScript charset="UTF-8">

    //解决浏览器自动将用户名，密码写入注册模态框对应name属性相同的input框中
    $("#register-modal-username").val("");
    $("#register-modal-username").attr("readonly","true");
    $("#register-modal-password").val("");
    $("#register-modal-password").attr("readonly","true");
    function openRegModal(){
        $("#register-modal-username").removeAttr("readonly");
        $("#register-modal-password").removeAttr("readonly");
        $("#register").modal();
    }

    //注册登录成功的返回数据
    var fullinformation;

    //ajaxform提交注册
    function submitregister(){
        if(emptyCheck("register-form")){
            alert("请输入所有注册信息");
            return;
        }
        $.ajax({
            type:"post",
            url:"/register",
            data:$('#register-form').serialize(),
            async:false,
            success:function (data) {
                fullinformation = JSON.parse(data);
                if(fullinformation.code == 0){      //注册成功
                    sessionStorage['fullinf']=data;
                    window.location.href = "/index";
                }else {                             //注册失败
                    alert(fullinformation.msg);
                }
            },
            error:function () {
                alert("发送请求失败");
            }
        });
    }

    //ajaxform提交登录
    function submitlogin(){
        if(emptyCheck("login-form")){
            alert("请输入所有登录信息");
            return;
        }
        if(!ispassword(document.getElementById('login-modal-password').value)){
            document.getElementById('login-modal-password').value=null;
            return;
        }
        $.ajax({
            type:"post",
            url:"/login_in",
            data:$('#login-form').serialize(),
            async:false,
            success:function (data) {
                fullinformation = JSON.parse(data);
                if(fullinformation.code == 0){      //登录成功
                    sessionStorage['fullinf']=data;
                    window.location.href = "/index";
                }else {                             //登录失败
                    alert(fullinformation.msg);
                }
            },
            error:function () {
                alert("发送请求失败");
            }
        });
    }

    //检查用户名是否已被注册
    function checkusername(username){
        $.ajax({
            type:"post",
            url:"/usernameIsExists?username="+username,
            data:{},
            async:false,
            success:function (data) {
                var checkinf = JSON.parse(data);
                if(checkinf.code == 0){      //校验成功(用户名可用)

                }else {                      //校验失败(用户名已存在)
                    document.getElementById("register-modal-username").value=null;
                    alert(checkinf.msg);
                }
            },
            error:function () {
                alert("发送请求失败");
            }
        });
    }

    //动态加载shool列表
    $.ajax({
        type:"post",
        url:"/schoolList",
        data:{},
        async:false,
        success:function (data) {
            var schoollist = JSON.parse(data);
            var schEle = document.getElementById("schoolList");
            for(i=0;i<schoollist.data.length;i++){
                var option = document.createElement("option");
                option.setAttribute("value",schoollist.data[i].schid);
                option.innerHTML=schoollist.data[i].schname;
                schEle.appendChild(option);
            }
        },
        error:function () {

        }
    });

    //屏蔽回车事件
    function pbhcsj(id){
        var e = window.event;
        if(e.keyCode == 13){
            if(id == 'register'){
                submitregister();
            }
            if(id == 'login'){
                submitlogin();
            }
            e.preventDefault();
        }
    }

    <!-- 登录注册校验 -->
    //验证姓名
    function isfullname(str){
        var reg=/^[\u4E00-\u9FA5]{2,8}$/;   //2-8位的汉字
        return reg.test(str);
    }
    //验证密码
    function ispassword(str){
        //var reg=/^[a-zA-Z0-9]{8,16}$/;   //8-16位字母或数字
        var reg=/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,16}$/;   //8-16位字母和数字
        return reg.test(str);
    }
    //手机号验证
    function isphone(str){
        var reg=/^1(?:3\d|4[4-9]|5[0-35-9]|6[67]|7[013-8]|8\d|9\d)\d{8}$/;
        return reg.test(str);
    }
    function check(id){
        var x;
        if(id.search("fullname") != -1){
            x = isfullname(document.getElementById(id).value);
        }
        if(id.search("password") != -1){
            x = ispassword(document.getElementById(id).value);
        }
        if(id.search("phone") != -1){
            x = isphone(document.getElementById(id).value);
        }
        if(!x){
            document.getElementById(id).value=null;
        }
        if(id == "register-modal-password2" && document.getElementById(id).value != document.getElementById("register-modal-password").value){
            document.getElementById(id).value=null;
        }
    }
    //数据是否存在为空
    function emptyCheck(formid){
        var form = document.getElementById(formid);
        var tagElements = form.getElementsByTagName('input');
        var str;
        for(var i=0;i<tagElements.length;i++){
            str = $("#"+tagElements[i].id).val();
            if(str == null || str == "" || typeof str == "undefined"){
                return true;
            }
        }
    }

    //显示/隐藏密码
    function changeInputType(id,tbid){
        if($("#"+id).attr("type") == "password"){
            document.getElementById(id).type="text";
            $("#"+tbid).attr("class","glyphicon glyphicon-eye-close");
            return;
        }
        if($("#"+id).attr("type") == "text"){
            document.getElementById(id).type="password";
            $("#"+tbid).attr("class","glyphicon glyphicon-eye-open");
            return;
        }
    }

    <!-- 登录，注册 回车事件 -->
    function etotab(obj,str){
        var e = window.event;
        var form = document.getElementById(str);
        var tagElements = form.getElementsByTagName('input');
        if(e.keyCode == 13){
            for(var i=0;i<tagElements.length;i++){
                if(obj.id == tagElements[i].id){
                    $("#"+tagElements[i+1].id).focus();
                    break;
                }
            }
            e.preventDefault();
        }
    }


</script>
</body>
</html>
